<template>
    <div class="task_edit">
        <van-nav-bar title="发布新任务" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" @click-right="releaseTask" right-text="确认发布"/>

        <div class="tips">
            <p>Tips：任务描述得越清晰,审核通过几率越大哦~<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请不要发布黄赌毒相关的任务哦~</p>

        </div>
        <div class="con">
            <div class="top">
                <van-cell-group>
                    <van-field label="任务标题" v-model="formData.task_title" placeholder="例: 知行logo设计" required/>
                    <van-field label="任务价钱" v-model="formData.task_price" placeholder="例: 500(元)" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" required/>
                    <van-field label="任务周期" v-model="formData.task_cycle" placeholder="例如(1天/周/月)" required/>
                    <van-field label="任务要求" v-model="formData.task_require" placeholder="如: 设计规范等" required/>
                </van-cell-group>
                <br/>
                <van-cell-group>
                    <van-cell title="开始时间" is-link value="" @click="selectTime('beginTimeShow')" v-model="formData.start_time" required/>
                    <van-cell title="截止时间" is-link value="" @click="selectTime('endTimeShow')" v-model="formData.end_time" required/>
                    <van-cell title="任务类型" v-model="formData.tag" @click="selectType('show')" is-link value="" required/>
                    <van-cell title="任务地址" v-model="formData.task_addr" @click="selectAddress(true)" is-link value="" />
                    <van-field label="详细地址" v-model="formData.task_addr2" />
                </van-cell-group>

                <br/>
                <van-cell-group>
                    <van-field label="任务描述" v-model="formData.task_des" type="textarea" placeholder="填写任务任务描述" rows="1" autosize required/>
                    <van-field label="补充说明" v-model="formData.task_remarks" type="textarea" placeholder="填写任务的备注或者补充说明" rows="1" autosize />
                    <van-field label="参考链接" v-model="formData.links" type="textarea" placeholder="如: http://m.zxskill.com" rows="1" autosize />
                </van-cell-group>
                <div class="upload">
                    <div class="up-text">
                        参考图片 (最多只能上传3张)
                    </div>
                    <div>
                        <div class="up-box">
                            <div class="up">
                                <van-uploader :after-read="onRead1" accept="image/gif, image/jpeg" multiple>
                                    <div class="inner">
                                        <i v-show="!formData.img1" class="zx-icon">&#xe71b;</i>
                                        <img v-show="formData.img1" :src="formData.img1" alt="">
                                    </div>
                                    <p>上传图片</p>
                                </van-uploader>
                            </div>
                            <div class="up">
                                <van-uploader :after-read="onRead2" accept="image/gif, image/jpeg" multiple>
                                    <div class="inner">
                                        <i v-show="!formData.img2" class="zx-icon">&#xe71b;</i>
                                        <img v-show="formData.img2" :src="formData.img2" alt="">
                                    </div>
                                    <p>上传图片</p>
                                </van-uploader>
                            </div>
                            <div class="up">
                                <van-uploader :after-read="onRead3" accept="image/gif, image/jpeg" multiple>
                                    <div class="inner">
                                        <i v-show="!formData.img3" class="zx-icon">&#xe71b;</i>
                                        <img v-show="formData.img3" :src="formData.img3" alt="">
                                    </div>
                                    <p>上传图片</p>
                                </van-uploader>
                            </div>
                        </div>
                    </div>

                </div>
                <div>
                    <div>
                        <van-popup v-model="show" position="bottom"><van-datetime-picker v-model="currentDate" @cancel="selectTime" @confirm="selectTimeFn" type="datetime" :min-date="minDate" :max-date="maxDate"/></van-popup>
                    </div>
                </div>
                <div>
                    <div>
                        <van-popup v-model="show0" position="bottom"><van-datetime-picker v-model="currentDate" @cancel="selectTime" @confirm="selectTimeFn2" type="datetime" :min-date="minDate" :max-date="maxDate"/></van-popup>
                    </div>
                </div>
                <div>

                    <van-popup v-model="show1" position="bottom">
                        <van-picker :title="'请选择任务类型'" :show-toolbar="true" :columns="columns" @change="onChange" @cancel="selectType('cancel')" @confirm="selectTypeFn"/>
                    </van-popup>

                    <van-popup v-model="showArea" position="bottom">
                        <van-area @confirm="addressFn" @cancel="selectAddress(false)" value="330106" :area-list="areaList" />
                    </van-popup>
                </div>
            </div>
        </div>
        <div class="release_btn">
            <van-button @click="releaseTask" type="default">确认发布</van-button>
        </div>
    </div>
</template>
<script>
    import VDistpicker from 'v-distpicker'
    import address from '../../utils/address'
    import { Uploader } from 'vant';
    import { Picker } from 'vant';
    import { Area } from 'vant';
    import { Button } from 'vant';

    import Vue from 'vue';
    Vue.use(Picker);
    Vue.use(Uploader);
    import { Field } from 'vant';
    import { Popup } from 'vant';
    import { DatetimePicker } from 'vant';
    import { Cell, CellGroup } from 'vant';
    Vue.use(DatetimePicker);
    Vue.use(Popup);
    Vue.use(Area);
    Vue.use(Cell).use(CellGroup).use(Button);
    Vue.use(Field);
    export default {
        components: { VDistpicker },
        data(){
            return{
                columns: ['技能任务', '线上任务', '线下任务', '悬赏互助', '其他'],
                show0:false,
                show:false,
                show1:false,
                showArea:false,
                areaList:address,
                minHour: 10,
                maxHour: 20,
                minDate: new Date(),
                maxDate: new Date(2050,10,10),
                currentDate: new Date(),
                formData:{
                    uid:JSON.parse(localStorage.getItem('user')).uid,
                    type:JSON.parse(localStorage.getItem('user')).type,
                    tag:'',
                    task_title:'',
                    start_time:'',
                    task_require:'',
                    task_addr:'',
                    task_addr2:'',
                    end_time:'',
                    task_con:'',
                    task_des:'',
                    task_remarks:'',
                    task_price:'',
                    links:'',
                    task_cycle:'',
                    img1:'',
                    img2:'',
                    img3:'',
                }
            }
        },
        methods: {
            onChange(picker, value, index) {
                this.$toast(`当前值：${value}, 当前索引：${index}`);
            },
            onRead1(file){
                this.upload(file.file,'img1')
            },
            onRead2(file){
                this.upload(file.file,'img2')

            },
            onRead3(file){
                this.upload(file.file,'img3')
            },
            onClickLeft() {
                history.back()
            },
            selectAddress(item){
              this.showArea=item;

            },
            addressFn(value){
                console.log(value[0].name)
                this.formData.task_addr = `${value[0].name} ${value[1].name} ${value[2].name}`
                this.showArea = false;
            },
            // confirm(value){
            //     console.log(this.$moment(value).valueOf())
            // },
            selectTime(item){
                if(item == 'beginTimeShow'){
                    this.show = true;
                }else if(item == 'endTimeShow'){
                    this.show0 = true;
                }else{
                    this.show=false;this.show0=false;
                }
            },
            selectTimeFn(value){
                this.formData.start_time=this.$moment(value).format('YYYY-MM-DD HH:mm:ss');
                this.show = false;
            },
            selectTimeFn2(value){
                this.formData.end_time=this.$moment(value).format('YYYY-MM-DD HH:mm:ss');
                this.show0 = false;

            },
            selectType(item){
                console.log(item)
                if(item=='show'){
                    this.show1 = true;
                }else if(item == 'cancel'){
                    this.show1 = false;
                }else{
                    console.log(item)
                }
            },
            upload(file,taget){
                let Form = new FormData();
                Form.append('avatar', file);
                this.$post('/api/upload',Form).then(res=>{
                    if(res.data.err_code ==0){
                        this.formData[taget]  = res.data.data.imgUrl;
                    }else{
                        this.$toast({message: res.data.err_msg})
                    }
                })
            },
            selectTypeFn(value){
                this.show1=false;
                this.formData.tag=value;
            },
            releaseTask(){

                this.$post('/api/task/create',this.formData).then(res=>{
                    if(res.data.err_code ==0){
                        this.$dialog.alert({
                            message:'恭喜您,任务已发布成功,点击确定将回到个人中心'
                        }).then(()=>{
                            this.$router.replace({name:'home'})
                        })
                    }else{
                        this.$dialog.alert({message:"发布失败,请核对带星号的选项是否填写完整"})
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        created(){
            console.log(address)
            document.body.style.backgroundColor='rgb(239, 243, 246)';
        },

    }
</script>
<style scoped lang="less">
    @import "../../public/css/task_edit.less";


</style>
<style>
    .distpicker-address-wrapper{
        display: flex;
    }
    .distpicker-address-wrapper select{
        width: 80px;
        font-size: 12px;
        line-height: 12px;
        padding: 0;
        border-radius: 4px;
        outline: none;
        margin-right: 5px;
    }
</style>
